<template>
	<div class="liveHall">
		<div class="container">
			<!--直播大厅标题-->
			<div class="liveTitle">
				<Divider>
					<h5>直播大厅</h5>
				</Divider>
			</div>
			<el-carousel :interval="4000" type="card" height="200px">
				<el-carousel-item v-for="item in recommendList">
					<img class="image_lb" :src="item.coverPhoto" @click="toLive(item.studioId)" />
					<!-- <h3 class="medium">{{ item.coverPhoto }}</h3> -->
				</el-carousel-item>
			</el-carousel>
			<el-row style="text-align: center;padding: 1.25rem;">
				分类:
				<el-button @click="chouseType(1)">游戏</el-button>
				<el-button @click="chouseType(2)">生活</el-button>
				<el-button @click="chouseType(3)">学习</el-button>
				<el-button @click="chouseType(4)">Vtuber</el-button>
			</el-row>
			<!--    头像-->
			<el-row :gutter="24">
				<div style="text-align: center;" v-if="test==0">
					<span style="font-size: 1.5rem;">暂无相关直播</span>
				</div>
				<el-col :md="6" :sm="6" :xs="6" v-for="(lists,index) in hostInfo" :key="index" v-if="index < pageSize">
					<div class="liveAvatar">
						<img class="image_lb" :src="lists.coverPhoto" @click="toLive(lists.roomId)"/>
						<h6 style="text-align: center;">{{lists.title}}</h6>
						<el-avatar :size="20" :src="lists.user.userPicture"></el-avatar>
						<span style="font-size: 1.125rem;padding: 0.3125rem;">{{lists.user.userName}}</span>
						<el-button type="warning" icon="el-icon-plus" size="mini" style="padding: 0.3125rem;" @click="clickAttention(lists.roomId)">关注</el-button>
						<span style="font-size: 1.125rem;padding: 0.3125rem;"></span>
					</div>
				</el-col>
			</el-row>
			<div class="checkMore">
				<span @click="morePerson" v-if="test!=0">{{showMoreTitle}}</span>
			</div>

		</div>
	</div>
</template>

<script src="./liveHall.js"></script>

<style scoped lang="scss">
	@import "liveHall";
</style>
